<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	contentType="text/html">

    <pm:page title="Translator">

        <f:facet name="postinit">
			<script type="text/javascript" src="http://www.google.com/jsapi"></script>
			<script type="text/javascript">
			  google.load("language", "1");

			  function translate() {
				  var fromText = $('#fromText').val(),
				  fromLang = $('#fromLang').val(),
				  toLang = $('#toLang').val();

				  google.language.translate(fromText, fromLang, toLang, function(result) {
					  if (!result.error) {

					   	$('#toText').text(result.translation);
					  }
					});

			  }
			</script>
		</f:facet>

        <!-- Main View -->
        <pm:view id="main" swatch="d">
            <pm:header title="Translator">
                <f:facet name="right"><p:button value="About" icon="info" href="#about"/></f:facet>
            </pm:header>

            <pm:content>
                <h:outputText value="From: " />
                <h:selectOneMenu id="fromLang">
                    <f:selectItems value="#{translatorView.languages}" />
                </h:selectOneMenu>

                <h:inputText id="fromText" />

                <p:separator />

                <p:commandButton value="Translate" type="button" onclick="translate()" />

                <p:separator />

                <h:outputText value="To: " />
                <h:selectOneMenu id="toLang">
                    <f:selectItems value="#{translatorView.languages}" />
                </h:selectOneMenu>

                <h:outputText id="toText" />
            </pm:content>

        </pm:view>

        <!-- About -->
        <pm:view id="about" swatch="d">
            <pm:header title="About">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                <h:outputText value="Brought to you by PrimeFaces Mobile and Google Translate" />
            </pm:content>
        </pm:view>

    </pm:page>

</f:view>